﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title></title>
    <script type="text/javascript" charset="utf-8" src="Scripts/jquery-1.11.0.min.js"></script>
    <link type="text/css" href="Scripts/bootstrap-3.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript" charset="utf-8" src="Scripts/bootstrap-3.3.1/js/bootstrap.min.js"></script>
    <link type="text/css" href="bootstrap-pagination.min.css" rel="stylesheet" />
    <script type="text/javascript" charset="utf-8" src="bootstrap-pagination.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var demo1 = BootstrapPagination($("#demo1"), {
                //记录总数。
                total: 101,
                //当前页索引编号。从其开始（从0开始）的整数。
                pageIndex: 2,
                //当分页更改后引发此事件。
                pageChanged: function (pageIndex, pageSize) {
                    alert("page changed. pageIndex:" + pageIndex + ",pageSize:" + pageSize)
                },
            });
            var demo2 = BootstrapPagination($("#demo2"), {
                layoutScheme: "lefttext,pagesizelist,firstpage,prevgrouppage,prevpage,pagenumber,nextpage,nextgrouppage,lastpage,pageinput,righttext",
                //记录总数。
                total: 101,
                //分页尺寸。指示每页最多显示的记录数量。
                pageSize: 20,
                //当前页索引编号。从其开始（从0开始）的整数。
                pageIndex: 2,
                //指示分页导航栏中最多显示的页索引数量。
                pageGroupSize: 5,
                //位于导航条左侧的输出信息格式化字符串
                leftFormateString: "本页{count}条记录/共{total}条记录",
                //位于导航条右侧的输出信息格式化字符串
                rightFormateString: "第{pageNumber}页/共{totalPages}页",
                //页码文本格式化字符串。
                pageNumberFormateString: "{pageNumber}",
                //分页尺寸输出格式化字符串
                pageSizeListFormateString: "每页显示{pageSize}条记录",
                //上一页导航按钮文本。
                prevPageText: "上一页",
                //下一页导航按钮文本。
                nextPageText: "下一页",
                //上一组分页导航按钮文本。
                prevGroupPageText: "上一组",
                //下一组分页导航按钮文本。
                nextGroupPageText: "下一组",
                //首页导航按钮文本。
                firstPageText: "首页",
                //尾页导航按钮文本。
                lastPageText: "尾页",
                //设置页码输入框中显示的提示文本。
                pageInputPlaceholder: "GO",
                //接受用户输入内容的延迟时间。单位：毫秒
                pageInputTimeout: 800,
                //分页尺寸列表。
                pageSizeList: [5, 10, 20, 50, 100, 200],
                //当分页更改后引发此事件。
                pageChanged: function (pageIndex, pageSize) {
                    alert("page changed. pageIndex:" + pageIndex + ",pageSize:" + pageSize)
                },
            });
            var demo3 = BootstrapPagination($(".demo3"));
            var demo4 = BootstrapPagination($(".demo4"));
        });
    </script>
</head>
<body>
    <form class="form-inline">
    <h1>Demo1：最简短代码示例</h1>
    <nav>
        <ul id="demo1" class="pagination">
        </ul>
    </nav>
    <h1>Demo2：通过程序代码设置参数</h1>
    <nav>
        <ul id="demo2" class="pagination">
        </ul>
    </nav>
    <h1>Demo3：通过HTML元素属性设置参数</h1>
    <nav>
        <ul class="pagination demo3" data-total="101" data-pageindex="1" data-pagesize="20" data-pagegroupsize="5"
            data-leftformatestring="本页{count}条记录/共{total}条记录"
            data-rightformatestring="第{pageNumber}页/共{totalPages}页"
            data-pagenumberformatestring="{pageNumber}"
            data-pagesizelistformatestring="每页显示{pageSize}条记录"
            data-prevpagetext="上一页" data-nextpagetext="下一页"
            data-prevgrouppagetext="上一组" data-nextgrouppagetext="下一组"
            data-firstpagetext="首页" data-lastpagetext="尾页"
            data-pageinput-placeholder="GO" data-pageinput-timeout="800"
            data-pagesizelist="[5, 10, 20, 50, 100, 200]"
            data-pagechanged='function (pageIndex, pageSize) {alert("page changed. pageIndex:" + pageIndex + ",pageSize:" + pageSize);};'
            data-layoutscheme="lefttext,pagesizelist,firstpage,prevgrouppage,prevpage,pagenumber,nextpage,nextgrouppage,lastpage,pageinput,righttext">
        </ul>
    </nav>
    <h1>Demo4：多个控件具有联动效果</h1>
    <nav>
        <ul class="pagination demo4" data-total="101" data-pageindex="1" data-pagesize="20" data-pagegroupsize="5"
            data-leftformatestring="本页{count}条记录/共{total}条记录"
            data-rightformatestring="第{pageNumber}页/共{totalPages}页"
            data-pagenumberformatestring="{pageNumber}"
            data-pagesizelistformatestring="每页显示{pageSize}条记录"
            data-prevpagetext="上一页" data-nextpagetext="下一页"
            data-prevgrouppagetext="上一组" data-nextgrouppagetext="下一组"
            data-firstpagetext="首页" data-lastpagetext="尾页"
            data-pageinput-placeholder="GO" data-pageinput-timeout="800"
            data-pagesizelist="[5, 10, 20, 50, 100, 200]"
            data-pagechanged='function (pageIndex, pageSize) {alert("page changed. pageIndex:" + pageIndex + ",pageSize:" + pageSize);};'
            data-layoutscheme="lefttext,pagesizelist,firstpage,prevgrouppage,prevpage,pagenumber,nextpage,nextgrouppage,lastpage,pageinput,righttext">
        </ul>
    </nav>
    <nav>
        <ul class="pagination demo4">
        </ul>
    </nav>
        </form>
</body>
</html>
